<template>
  <div class="banner">
    <el-carousel trigger="click" height="240px" type="card">
      <el-carousel-item
        v-for="(item, index) in bannerList"
        :key="index"
        class="bannerCard"
      >
        <div @click="jump(item.id)">
          <el-image
            :src="`${image}/${item.imgUrl}`"
            :alt="item.name"
            :fit="'cover'"
          />
          <div class="title">{{ item.name }}</div>
        </div>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
import { IMAGES } from '@/assets/js/settings'
export default {
  props: {
    bannerList: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  computed: {
    image() {
      return IMAGES
    }
  },
  methods: {
    jump(id) {
      this.$router.push(`/news/${id}`)
    }
  }
}
</script>

<style lang="scss" scoped>
$--titleheight: 50px;
.banner {
  margin: 20px auto;
  width: $--typeArea;
}
.title {
  position: absolute;
  bottom: 0px;
  margin-left: 20px;
  height: $--titleheight;
  width: 100%;
  font-size: 18px;
  line-height: $--titleheight;
  color: #fff;
  background-image: linear-gradient(
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.5) 100%
  );
}
/deep/ .el-carousel {
  border-radius: 4px;
}
</style>
